<template>
  <div class="wrap">
    <div class="keywordbtn">
      <el-form :model="formInline" size="small" label-width="80px">
        <el-form-item label="关键字">
          <el-input v-model="formInline.user" placeholder="根据编号搜索" style="width:341px" />
        </el-form-item>
      </el-form>
      <div class="rigbtn">
        <el-button size="small">清除</el-button>
        <el-button type="primary" size="small">搜索</el-button>
      </div>
    </div>
    <div class="statdata">
      <i class="el-alert__icon el-icon-info" />
      <span>
        数据一共 {{ page.total }} 条
      </span>
    </div>
    <!-- 表 -->
    <el-table
      :data="getdata"
      style="width: 100%"
      class="tabletit"
    >
      <el-table-column
        prop="number"
        label="编号"
        width="213"
      />
      <el-table-column
        prop="questionType"
        label="题型"
        width="78"
      >
        <template v-slot="scope">
          {{ scope.row.questionType | questionType }}
        </template>
      </el-table-column>
      <el-table-column
        prop="number"
        label="题目编号"
        width="243"
      />
      <el-table-column
        prop="addDate"
        label="录入时间"
        width="214"
      >
        <!-- 作用域插槽 -->
        <template v-slot="scope">
          {{ scope.row.addDate | formatDate }}
        </template>
      </el-table-column>
      <el-table-column
        prop="chkState"
        label="答题时间(s)"
        width="200"
      />
      <el-table-column
        prop="difficulty"
        label="正确率(%)"
        width="200"
      />
      <el-table-column
        prop="creator"
        label="录入人"
        width="200"
      />
      <el-table-column
        label="操作"
        width="91"
      >
        <template v-slot="scope">
          <el-button type="danger" icon="el-icon-delete" circle plain @click="delbtn(scope.row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-form :inline="true" class="demo-form-inline" style="text-align: right">
      <el-form-item>
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            :current-page="page.page"
            :page-size="page.pagesize"
            :total="page.total"
            layout="prev,pager,next"
            background
            @current-change="changePage"
          />
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-select v-model="value11" @change="yetiao">
          <el-option label="20/条页" value="20/条页" />
          <el-option label="30/条页" value="30/条页" />
          <el-option label="50/条页" value="50/条页" />
          <el-option label="100/条页" value="100/条页" />
        </el-select>
      </el-form-item>
      <el-form-item label="前往">
        <el-input v-model.number="page.page" placeholder="请输入前往页内容" @change="fn()" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getProvinceCity, delQuesList } from '@/api/question'
export default {
  data() {
    return {
      getdata: [],
      value11: '20/条页',
      page: {
        page: 1, // 当前页码
        pagesize: 5, // 每页显示的条数
        total: 0 // 服务器的总数据
      },
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  created() {
    this.getProvinceCity()
    this.delQuesList()
  },
  methods: {
    async delbtn(id) {
      await this.$confirm('此操作将永久删除该题目, 是否继续?')
      await delQuesList(id)
    },
    async getProvinceCity(data) {
      const getdata = await getProvinceCity(data)
      console.log(getdata, 'getdata')
      this.getdata = getdata.items
      this.page.total = getdata.counts
    },
    fn() {
      console.log(13)
      this.getProvinceCity(this.page)
    },
    // 选择一页多少条数
    yetiao() {
      if (this.value11 == '100/条页') {
        this.page.pagesize = 100
      } else if (this.value11 == '30/条页') {
        this.page.pagesize = 30
      } else if (this.value11 == '50/条页') {
        this.page.pagesize = 50
      } else if (this.value11 == '20/条页') {
        this.page.pagesize = 20
      }
      this.getProvinceCity(this.page)
    },
       // 切换分页
       changePage(newpage) {
      this.page.page = newpage
      this.getProvinceCity(this.page)
    }
    }
}
</script>
<style>
.wrap{
    padding: 19px;
}
.keywordbtn{
    display: flex;
    justify-content: space-between;
    margin: 14px 0 14px;
    position: relative;
}
.rigbtn{
    position: absolute;
    right:13px;
}
.statdata{
    height: 34px;
    background-color: #f4f4f5;
    padding: 8px 16px;
    margin-bottom:15px;
}
.statdata span{
    color:#909399;
    font-size: 13px;
    margin-left: 4px;
}
.el-icon-info{
    color:#909399;
}
.page{
    margin-top: 20px;
    text-align: right;
}
.demo-form-inline{
  margin-top: 14px;
}
</style>
